<template>
    <div class="create-active">
        <el-upload
                class="upload-demo"
                drag
                :action="apiUrl"
                name="file"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                accept="jpg"
        >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
        <div class="qrcode" v-loading="loading">
            <img v-if="imageUrl" :src="imageUrl" class="qrcode">
        </div>

    </div>

</template>

<script>
    export default {
        name: 'WechatQrcode',
        data () {
            return {
                apiUrl: apiUrl + 'Wechat/qrcode',
                imageUrl: '',
                loading:false
            }
        },
        mounted () {
            this.$nextTick(function () {
                this.load();//概况
            })
        },
        methods: {
            //概况数据获取
            load() {
                this.$http.get(this.apiUrl)
                        .then(function (response) {
                            this.imageUrl=response.data.qrcode;
                        })
                        .catch(function (response) {
                            console.log(response);
                        });
            },
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
                this.loading = false;
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                this.loading=true;
                return isJPG && isLt2M;
            }

        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.qrcode{width:300px;height: 300px;}
</style>
